<template>
  <div class="layout u-p-20">
    <u-navbar :isBack="false" title="消息" :background="background"></u-navbar>
    <u-search
      placeholder="搜索"
      v-model="keyword"
      shape="round"
      bg-color="#fff"
      :show-action="false"
    ></u-search>
    <div class="info_menu u-m-t-20 u-flex u-row-around">
      <div v-for="(n, i) in noticeList" :key="i" @click="goDetail(i)">
        <u-image
          width="96"
          height="96"
          src="/static/emptyCart.png"
          mode="aspectFit"
        ></u-image>
        <text class="menu_txt">{{ n.title }}</text>
      </div>
    </div>
    <div class="info_list u-m-t-20 bg_white">
      <div class="u-flex u-p-20" @click="goDetail(3)">
        <u-avatar
          size="96"
          src="/static/emptyCart.png"
          mode="circle"
          class="u-m-r-20"
        ></u-avatar>
        <div class="info_l_r u-p-b-20">
          <div class="u-flex u-row-between">
            <div class="seller_name">通知</div>
            <div class="time">5分钟前</div>
          </div>
          <div class="u-flex u-row-between u-m-t-20">
            <div class="u-line-1 info_tip">中秋来临，平台活动大放送啦</div>
            <div class="info_num">999</div>
          </div>
        </div>
      </div>
      <div class="u-flex u-p-20" v-for="n of 8" :key="n" @click="goChat">
        <u-avatar
          size="96"
          src="/static/emptyCart.png"
          mode="circle"
          class="u-m-r-20"
        ></u-avatar>
        <div class="info_l_r u-p-b-20">
          <div class="u-flex u-row-between">
            <div class="seller_name">马力官方旗见店</div>
            <div class="time">昨天</div>
          </div>
          <div class="u-flex u-row-between u-m-t-20">
            <div class="u-line-1 info_tip">
              亲爱的亲，打扰您了，看您在我们家买啊啊啊啊啊啊啊啊啊啊啊
            </div>
            <div class="info_num">999</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  </div>
</template>
<script>
export default {
  data() {
    return {
      background: {
        backgroundColor: "#f4f8fb",
      },
      keyword: "",
      noticeList: [
        {
          img: "/static/emptyCart.png",
          title: "活动通知",
        },
        {
          img: "/static/emptyCart.png",
          title: "积分通知",
        },
        {
          img: "/static/emptyCart.png",
          title: "订单通知",
        },
      ],
    };
  },
  methods: {
    goChat() {
      window.location.href =
        "https://101911.kefu.easemob.com/webim/im.html?configId=8bcc4d9a-7ae4-4e8e-9a6c-ab1489851097";
    },
    goDetail(i) {
      const urlList = ["active", "integral", "order", "systemNotice"];
      uni.navigateTo({
        url: `./${urlList[i]}`,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.layout {
  background: #f4f8fb;
}
.info_menu {
  height: 204rpx;
  background: #ffffff;
  border-radius: 20rpx;
}
.menu_txt {
  height: 28rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #010103;
  line-height: 28rpx;
}
.info_list {
  border-radius: 20rpx;
}
.seller_name {
  height: 32rpx;
  font-size: 32rpx;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #010103;
  line-height: 48rpx;
}
.time {
  height: 24rpx;
  font-size: 24rpx;
  font-family: SourceHanSansCN-Light, SourceHanSansCN;
  font-weight: 300;
  color: #aaaaaa;
  line-height: 36rpx;
}
.info_l_r {
  width: 80%;
  border-bottom: 1px solid #efefef;
}
.info_tip {
  width: 82%;
  font-size: 26rpx;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #aaaaaa;
}
.info_num {
  height: 34rpx;
  line-height: 34rpx;
  background: #fa6c3e;
  border-radius: 18px;
  color: #ffffff;
  padding: 4rpx 10rpx;
}
</style>
